import * as React from 'react';
import { Link } from 'react-router';
import { observer } from 'mobx-react';
import { Form, Input, DatePicker, Button, Table, message } from 'antd';
import { createColumns } from './ManagerTableColumns';
import { TopicListModel } from '../../../../../model/assets/standard/TopicListModel';
import { currUser } from "../../../../../model/CurrUserModel";
import * as moment from 'moment';

@observer
export class TopicManager extends React.Component<any, any> {

    state = {
        store: new TopicListModel(),
        columns: createColumns(this)
    };

    componentDidMount() {
        this.state.store.fetchData().catch(res => message.error("数据加载失败，请重试", 2.5));
    }

    private search = () => {
        var store = this.state.store;
        if (!store.searchTimes) {
            return message.error("请选择搜索时间段", 2.5);
        }
        store.fetchData();
    }

    render() {
        var {store} = this.state;
        var {data, meta, loading} = store;
        data = data && data.map(item => ({ ...item, key: item.id }));

        return <div>
            <Form inline>
                <Form.Item>
                    <Input.Search placeholder="名称" value={store.searchName} onChange={e => store.searchName = e.target.value} />
                </Form.Item>
                <Form.Item>
                    <DatePicker.RangePicker
                        showTime
                        format="YYYY-MM-DD HH:mm:ss"
                        defaultValue={store.searchTimes.map(ts => moment(ts))}
                        onChange={value => store.searchTimes = value.map(d => d.unix() * 1000)}
                        ranges={store.searchRanges}
                    />
                </Form.Item>
                <Form.Item>
                    <Button type="primary" size="large" icon="search" onClick={this.search}>搜索</Button>
                </Form.Item>
                {store.searchName != null && <Form.Item>
                    <Button size="large" icon="close-circle-o" onClick={() => {
                        store.searchName = null;
                        store.fetchData();
                    }}>清空</Button>
                </Form.Item>}
            </Form>

            {!currUser.superAdmin && <Link to="/content/assets/topic/create">
                <Button type="primary" style={{ margin: "20px 0 0" }}>+新建</Button>
            </Link>}

            <Table
                onChange={this.onTableChange}
                columns={this.state.columns}
                bordered
                loading={loading}
                style={{ marginTop: 20 }}
                dataSource={data as any}
                pagination={{ ...meta, current: meta.current + 1 }} />
        </div>;
    }

    deleteItem(id: string) {
        this.state.store.deleteItem(id).then(res => {
            message.success(`删除成功`, 2.5);
        }, res => {
            message.error(`删除失败，请重试`, 2.5);
        });
    }

    private onTableChange = (pagination) => {
        this.state.store.fetchData(pagination.current - 1, pagination.pageSize);
    }
}